<template>
  <ex-dialog
    width="60%"
    class="ex-diolog"
    title="发爆卡"
    :visible="visible"
    @closeDialog="handleClose"
    :close-on-click-modal="false"
    center
  >
    <div class="main" v-if="!isNext">
      <div class="main_title">卡基本信息</div>
      <div class="cover">
        <span>卡封面：</span>
        <div>
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="formInline.individuationCardCover"
              :src="formInline.individuationCardCover"
              class="cover_img"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="card_detail">
        <el-form
          :inline="true"
          :rules="rules"
          :model="formInline"
          ref="formInline"
        >
          <el-form-item label="卡类型：">
            <span>体验卡</span>
          </el-form-item>
          <el-form-item label="爆卡分类：" prop="experienceCardType">
            <el-select
              v-model="formInline.experienceCardType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡名称：" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="卡有效期：" prop="validityType">
            <el-select v-model="formInline.validityType" placeholder="请选择">
              <el-option
                v-for="item in dataOptions"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡面值：" prop="worth">
            <el-input v-model="formInline.worth" placeholder="请输入"
              ><template slot="append">元</template></el-input
            >
          </el-form-item>
          <el-form-item label="购卡金额：" prop="buyMoney">
            <el-input v-model="formInline.buyMoney" placeholder="请输入"
              ><template slot="append">元</template></el-input
            >
          </el-form-item>
          <el-form-item label="发行数量：" prop="issueTotal">
            <el-input
              v-model.number="formInline.issueTotal"
              placeholder="请输入"
              ><template slot="append">张</template></el-input
            >
          </el-form-item>
          <el-form-item label="限购次数：">
            <el-input v-model.number="formInline.buyLimit" placeholder="请输入"
              ><template slot="append">次</template></el-input
            >
          </el-form-item>
          <el-form-item label="是否收款码显示：">
            <el-select v-model="formInline.isShow" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="售卡佣金：" prop="commissionRatio">
            <el-input
              v-model.number="formInline.commissionRatio"
              placeholder="请输入"
              ><template slot="append">%</template></el-input
            >
          </el-form-item>
          <div class="main_title">卡权益信息</div>
          <div>
            <el-form-item
              label="活动名称："
              :prop="'experienceDTO.' + 'projectName'"
              :rules="rules.projectName"
            >
              <el-input
                v-model="formInline.experienceDTO.projectName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="可用次数：">
              <span>1 次</span>
            </el-form-item>
            <el-form-item
              label="项目价值："
              :prop="'experienceDTO.' + 'projectWorth'"
              :rules="rules.projectWorth"
            >
              <el-input
                v-model="formInline.experienceDTO.projectWorth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="buttom_box">
            <el-button type="primary" @click="getNext('formInline')"
              >下一步</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <!-- 第二步 -->
    <div class="main" v-if="isNext">
      <div class="explain_title">卡说明介绍：</div>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="assetIntroduce"
        maxlength="5000"
        show-word-limit
      >
      </el-input>
      <div class="explain_title"><span class="rcolor">*</span>退卡说明：</div>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="refundRule"
        maxlength="5000"
        show-word-limit
      >
      </el-input>
      <div class="is_top">
        <div class="explain_title" style="margin: -2px 0 0">
          <span class="rcolor">*</span>是否上架：
        </div>
        <el-radio v-model="radio" label="1">是</el-radio>
        <el-radio v-model="radio" label="2">否</el-radio>
      </div>
      <!-- <div class="read">
        <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
        <span class="agreement"
          ><a target="view_window" href="https://www.milianmeng.net/card/"
            >《蜜链盟预付卡发卡协议》</a
          ></span
        >
      </div> -->
      <div class="buttom_box">
        <el-button type="" @click="isNext = false">上一步</el-button>
        <el-button type="primary" @click="submitForm">立即发布</el-button>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
// api
import { adminDict, experienceCard } from "@/api/merchants";

export default {
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      isNext: false,
      options2: [], //爆卡分类数组
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      dataOptions: [],
      checked: true,
      options: [
        {
          id: "2",
          value: "否",
        },
        {
          id: "1",
          value: "是",
        },
      ],
      radio: "1",
      rules: {
        name: [{ required: true, message: "请输入卡名称", trigger: "blur" }],
        validityType: [
          { required: true, message: "请选择卡有效期", trigger: "change" },
        ],
        experienceCardType: [
          { required: true, message: "请选择爆卡类型", trigger: "blur" },
        ],
        worth: [{ required: true, message: "请输入卡面值", trigger: "blur" }],
        buyMoney: [
          { required: true, message: "请输入购卡金额", trigger: "blur" },
        ],
        issueTotal: [
          { required: true, message: "请输入发行数量", trigger: "blur" },
        ],
        projectName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        projectWorth: [
          { required: true, message: "请输入项目价值", trigger: "blur" },
        ],
        commissionRatio: [
          { required: true, message: "请输入售卡佣金", trigger: "blur" },
        ],
      },
      formInline: {
        merchantId: "", //商家id
        experienceCardType: "", //爆卡类型
        individuationCardCover: "", //个性化封面
        cardType: "5", //卡类型 1 股东卡 2 计次卡 3 计费卡 4 课时卡 5体验卡 asset_card_type
        name: "", //名称
        validityType: "", //有效期类型
        worth: "", //面值
        buyMoney: "", //购卡金额
        issueTotal: "", //发行数量
        buyLimit: "", //购卡限制
        commissionRatio: "", //平台佣金比例（单位:%）
        isShow: "2", //收款码是否展示 1 展示 2不展示
        assetIntroduce: "", //卡介绍说明
        basePower: [3], //基础权益
        experienceDTO: {
          projectName: "特价活动", //项目名称
          projectNumber: "1", //项目可用次数
          projectWorth: "", //项目价值
        },
        usableCount: "1", //消费次数/课时
        refundRule:
          "1.未使用的卡，支持冷静期，7天内无理由退款。\n2.已使用的卡：\n    对于计费卡，可退卡内余额（赠送的金额不退款）；\n    对于计次卡，根据剩余次数折算成退款金额；\n    对于课时卡，根据剩余课时数折算成退款金额。\n3.已消费的金额，如已享有会员卡折扣优惠，退款时需要按原价计算扣除差价，再退剩余金额", //退卡规则
        shopStatus: "", //上下架状态 1 上架  2 下架  asset_shop_status
      },
      refundRule:
        "1.未使用的卡，支持冷静期，7天内无理由退款。\n2.已使用的卡：\n    <对于计费卡，可退卡内余额（赠送的金额不退款）；\n    <对于计次卡，根据剩余次数折算成退款金额；\n    <对于课时卡，根据剩余课时数折算成退款金额。\n3.已消费的金额，如已享有会员卡折扣优惠，退款时需要按原价计算扣除差价，再退剩余金额", //退卡规则
      assetIntroduce: "", //卡介绍说明
    };
  },
  created() {
    this.getlinkagelist();
    this.getcardType()
    console.log(this.id);
  },
  methods: {
    getlinkagelist() {
      //获取有效期字典
      const params = {
        dictType: "asset_card_validity_type ",
      };
      adminDict(params).then((res) => {
        this.dataOptions = res.result[0].dictList;
      });
    },
    getcardType() {
      //获取爆卡分类
      const params = {
        dictType: "asset_experience_card_type",
      };
      adminDict(params).then((res) => {
        this.options2 = res.result[0].dictList;
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const format = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = format.some((item) => file.type === item);
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      //店铺头像
      this.formInline.individuationCardCover = res.result.url;
    },
    getNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isNext = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm() {
      this.formInline.merchantId = this.id;
      let Base64 = require("js-base64").Base64;
      this.formInline.refundRule = Base64.encode(this.refundRule);
      this.formInline.assetIntroduce = Base64.encode(this.assetIntroduce);
      this.formInline.shopStatus = this.radio;
      //   this.formInline.cardCover = this.formInline.cardType;
      if (this.formInline.refundRule == "") {
        this.$message({
          type: "warning",
          message: "请填写退卡说明",
        });
        return;
      } 
      // else if (this.checked == false) {
      //   this.$message({
      //     type: "warning",
      //     message: "请勾选我已阅读",
      //   });
      //   return;
      // }
      console.log(this.formInline);
      //   return;
      var params = {
        ...this.formInline,
      };
      experienceCard(params).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功!",
        });
        setTimeout(() => {
          this.handleClose();
          this.$emit("success");
        }, 800);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
  .grid-layout {
    width: 560px;
    margin: 0 auto;
  }
  .img {
    display: block;
    width: 100px;
    height: auto;
  }
  .main_title {
    font-size: 17px;
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
  }
  .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
  }
  .cover {
    display: flex;
    font-size: 14px;
    color: #606266;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .cover span {
    margin-right: 20px;
  }
  .cover_img {
    width: 208px;
    height: 128px;
  }
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 208px !important;
    height: 128px !important;
  }
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 208px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .buttom_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0;
  }
  .rcolor {
    color: #e62222;
  }
  .explain_title {
    font-size: 15px;
    color: #333;
    margin: 20px 0 10px;
    font-weight: bold;
  }
  .is_top {
    display: flex;
    margin: 20px 0;
  }
  .read {
    padding: 0 0 30px;
  }
  .agreement {
    color: #1890ff;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
